<template>
  <q-page class="home-page">
    <div style="padding-top: 0vh; position: relative; z-index: 0;">
      <img src="~/assets/images/home/top.png" alt="top" style="width: 100%" />
    </div>

    <div style="background-color: #ffffff4d; padding: 6px;border-radius: 8px; margin-top: -1vw;z-index: 1;" class="q-ma-md relative-position">
      <div style="border-radius: 8px" class="bg-white q-pa-md ">
        <div class="text-center" style="color: #FFAD13">— 分期还款0手续费，提前还款减免利息 —</div>
        <div
          class="date-box q-mt-md q-px-md q-py-sm flex items-center justify-between"
          @click="timeType = 12"
          :class="{ active: timeType === 12 }"
        >
          <div>
            <div class="flex items-center">
              <div class="q-mr-xs" style="font-size: 16px; font-weight: 500">分12个月还</div>
              <div class="center"><img src="~/assets/images/home/icon-hot.png" style="width: 16px" /></div>
            </div>
            <div class="flex items-center q-mt-xs" style="color: #666; font-size: 12px">
              <div class="q-mr-md">首期还 ￥{{ amountlixi.firstBack12 }}</div>
              <div>总利息 ￥{{ amountlixi.firstBack12 }}</div>
            </div>
          </div>
          <div class="center">
            <img v-show="timeType === 12" src="~/assets/images/home/okselect.png" style="width: 20px" />
            <img v-show="timeType !== 12" src="~/assets/images/home/noselect.png" style="width: 20px" />
          </div>
        </div>
        <div
          class="date-box q-px-md q-py-sm flex items-center justify-between"
          @click="timeType = 6"
          :class="{ active: timeType === 6 }"
          style="margin-top: 11px"
        >
          <div>
            <div class="flex items-center">
              <div class="q-mr-xs" style="font-size: 16px; font-weight: 500">分6个月还</div>
              <div class="center"><img src="~/assets/images/home/icon-hot.png" style="width: 16px" /></div>
            </div>
            <div class="flex items-center q-mt-xs" style="color: #666; font-size: 12px">
              <div class="q-mr-md">首期还 ￥{{ amountlixi.firstBack6 }}</div>
              <div>总利息 ￥{{ amountlixi.lixi6 }}</div>
            </div>
          </div>
          <div class="center">
            <img v-show="timeType === 6" src="~/assets/images/home/okselect.png" style="width: 20px" />
            <img v-show="timeType !== 6" src="~/assets/images/home/noselect.png" style="width: 20px" />
          </div>
        </div>
        <div
          class="date-box q-px-md q-py-sm flex items-center justify-between"
          @click="timeType = 3"
          :class="{ active: timeType === 3 }"
          style="margin-top: 11px"
        >
          <div>
            <div class="flex items-center">
              <div class="q-mr-xs" style="font-size: 16px; font-weight: 500">分3个月还</div>
              <div class="center"><img src="~/assets/images/home/icon-hot.png" style="width: 16px" /></div>
            </div>
            <div class="flex items-center q-mt-xs" style="color: #666; font-size: 12px">
              <div class="q-mr-md">首期还 ￥{{ amountlixi.firstBack3 }}</div>
              <div>总利息 ￥{{ amountlixi.lixi3 }}</div>
            </div>
          </div>
          <div class="center">
            <img v-show="timeType === 3" src="~/assets/images/home/okselect.png" style="width: 20px" />
            <img v-show="timeType !== 3" src="~/assets/images/home/noselect.png" style="width: 20px" />
          </div>
        </div>
      </div>
    </div>

    <div style="background-color: #ffffff4d; padding: 6px;border-radius: 8px; margin-top: 16px" class="q-ma-md ">
      <div style="border-radius: 8px; " class="bg-white q-pa-md ">
      <div class="flex items-center justify-between" style="font-size: 16px">
        <div style="color: #666">优惠券</div>
        <div style="color: #ff2626; font-weight: bold">-￥30</div>
      </div>
      <div style="background: #9b9b9b; opacity: 0.2; height: 1px" class="q-my-sm"></div>
      <div class="flex items-center justify-between" style="font-size: 16px">
        <div style="color: #666">收/还款账户</div>
        <div style="" class="center"><img src="~/assets/images/home/cards.png" style="width: 120px" /></div>
      </div>

      <div
        style="background: #FFF4E7; border-radius: 6px; font-size: 16px"
        class="q-py-sm q-px-md q-mt-sm no-wrap flex items-center input-box"
      >
        <div style="white-space: nowrap">手机号：</div>
        <input
          v-model="phone"
          type="text"
          @click="inputClickHandler"
          class="input-nostyle flex-1 "
          style="width: 200px; height: 36px;"
          placeholder="请输入手机号"
        />
      </div>
      <q-btn color="primary" unelevated style="border-radius: 8px; font-size: 17px;" padding="sm md"  class="full-width q-mt-md"  label="去借款" @click="submit" />

      <div class="q-mt-xs ">
        <span class="q-mr-xs" style="vertical-align: text-top" @click="isApprove = !isApprove">
          <img v-if="!isApprove" src="~/assets/images/home/noselect.png" style="width: 14px" />
          <img v-else src="~/assets/images/home/okselect.png" style="width: 14px" />
        </span>
        <span style="color: #999; font-size: 13px"
          ><span @click="isApprove = true">我已阅读并同意</span
          ><a class="" style="color: inherit" :href="useProtocolLink().userServicesAgreement"
            >《用户服务协议》</a
          >和<a style="color: inherit" :href="useProtocolLink().privacyPolicy">《用户隐私政策》</a></span
        >
      </div>
    </div>
    </div>

    <div class="text-white text-center q-px-md" style="font-size: 12px">
      <div class="">本平台是移动金融信息广告展示平台，不提供放贷业务平台</div>
      <div>向您展示的贷款产品或贷款咨询服务是由贷款服务机构</div>
      <div>(泛指为您提供贷款咨询服务或贷款发放服务的机构)</div>
      <div>或贷款中介咨询机构提供</div>
      <div>您最终获取的贷款额度，放款时间以第三方机构实际审批结果为准</div>
      <div>
        温馨提示:请根据个人能力合理贷款，理性消费，避免逾期请不要相信任何要求您支付费用的信息、邮件、电话等不实信息
      </div>
    </div>

    <div class="" style="height: 50px"></div>
    <VerificationCode ref="VerificationCodeRef" />
    <BackDialog ref="BackDialogRef" />
  </q-page>
</template>

<script setup lang="ts">
import { Button, showLoadingToast } from 'vant';
import { showToast } from 'vant';
import { ref } from 'vue';
import VerificationCode from 'src/components/VerificationCode.vue';
import { VerificationCodeInstance } from 'src/components/VerificationCode';
import { useAppStore } from 'src/stores/app-store';
import { useRoute, useRouter } from 'vue-router';
import { useProtocolLink } from 'src/config/protocol_link';
import { getUrlParam } from 'src/boot/paramhandler';
import { useLoginHook } from 'src/hooks/login_hook';
import { useWebView } from './webview/webview';
import BackDialog from 'src/components/BackDialog.vue';
import { BackDialogInstance } from 'src/components/BackDialog';
import { onMounted } from 'vue';
import { onUnmounted } from 'vue';
import { computed } from 'vue';

const isApprove = ref(true);

const BackDialogRef = ref<BackDialogInstance>();
const VerificationCodeRef = ref<VerificationCodeInstance>();
const phone = ref('');
const router = useRouter();
const route = useRoute();
const timeType = ref(12);

const amount = ref<number | undefined>(20000);

const amountlixi = computed(() => {
  const amountTemp = amount.value ?? 0;
  return {
    firstBack12: ((((amountTemp / 1000) * 12) / 12) * 6).toFixed(2),
    firstBack6: ((((amountTemp / 1000) * 6) / 12) * 6).toFixed(2),
    firstBack3: ((((amountTemp / 1000) * 3) / 12) * 6).toFixed(2),
    lixi12: (amountTemp * 0.0002 * 365 * (12 / 12)).toFixed(2),
    lixi6: (amountTemp * 0.0002 * 365 * (6 / 12)).toFixed(2),
    lixi3: (amountTemp * 0.0002 * 365 * (3 / 12)).toFixed(2),
  };
});

const submit = async () => {
  const { pageType } = useAppStore();

  if (!isApprove.value) {
    return showToast('请先同意协议');
  }

  const _phone = `${phone.value}`.trim();
  if (!_phone.length) {
    return showToast('请输入手机号');
  }
  if (!/^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(_phone)) {
    return showToast('手机号格式不正确');
  }
  if (useAppStore().isSMS) {
    VerificationCodeRef.value?.show(_phone);
    return;
  }
  const toast = showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0,
  });
  await useAppStore().login(_phone);
  toast.close();
  useLoginHook(router, route).afterLoginHandler();
};

const popstateHandler = (e: PopStateEvent) => {
  BackDialogRef.value?.show();
  setTimeout(() => {
    window.history.pushState({ indexPage: true }, 'indexPage', window.location.href);
  });
};

onMounted(() => {
  window.history.pushState({ indexPage: true }, 'indexPage', window.location.href);
  window.addEventListener('popstate', popstateHandler);
});

onUnmounted(() => {
  window.removeEventListener('popstate', popstateHandler);
});

const inputClickHandler = () => {
  if (!['Win', 'win', 'Mac', 'mac'].some((item) => (window.navigator.platform ?? '').includes(item))) {
    window.scrollBy(0, 320);
  }
};

const initData = async () => {
  const { initPage, jointLogin } = useAppStore();
  const toast = showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0,
  });
  try {
    const { chargeType } = await initPage();
    const jointPhone = ((route.query.u as string) ?? (route.query.uid as string)  ?? '').trim();
    if (jointPhone && chargeType == 3) {
      await jointLogin(jointPhone);
      toast.close();
      return useLoginHook(router, route).afterLoginHandler();
    }
  } catch (error) {
    console.error(error);
  }
  toast.close();
};
initData();
</script>

<style lang="scss" scoped>
.home-page {
  background-color: #FFA567;
  background-image: url(src/assets/images/home/bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.box-border {
  border: 2px solid rgba($color: #fff, $alpha: 0.3);
}
.qbjc {
  background: linear-gradient(180deg, #fdf9d4 0%, #fddf7d 100%);
  border-radius: 0px 1.6vw 0px 1.7vw;
  opacity: 0.9;
  color: #a24e1d;
  padding: 1px 6px;
}

.input-box{
  border: 1px solid transparent;
  transition-duration: 150ms;
  &:has(input:focus){
    border: 1px solid #FFAD12;
  }
}
.date-box {
  border-radius: 6px;
  border: 1px solid transparent;
  background-color: #F6F6F6;

  &.active {
    border: 1px solid #FFAD12;
    background-color: #FFF4E7;
  }
}
.submit-btn {
  background: url(src/assets/images/home/submit.png) no-repeat;
  background-size: 100% 100%;
  height: 100%;
}
</style>
